<template>
    <NuxtLayout name="default">
        <div class="flex flex-1 gap-4 overflow-hidden">
            <div class="flex flex-col w-[360px] bg-body rounded-lg border border-br-lighter">
                <div class="m-3">
                    <editor-option type="dalle" />
                </div>
                <el-scrollbar>
                    <div class="p-4 pt-0 flex flex-col gap-4 relative">
                        <!-- 正向提示词 -->
                        <editor-prompt
                            v-model="formData.prompt_in"
                            :engine="formData.engine"
                        />

                        <!-- 绘画尺寸 -->
                        <dalle-size v-model="formData.scale" />

                        <!-- 风格选择 -->
                        <dalle-style v-model="formData.other_params.style" />

                        <!-- 图片质量 -->
                        <dalle-quality v-model="formData.other_params.quality" />
                    </div>
                </el-scrollbar>

                <div class="m-3 mt-0">
                    <create-button />
                </div>
            </div>

            <GalleryResult />
        </div>
    </NuxtLayout>
</template>

<script setup lang="ts">
import CreateButton from './_components/common/create-button.vue'
import EditorOption from './_components/common/editor-option.vue'
import EditorPrompt from './_components/common/editor-prompt.vue'
import GalleryResult from './_gallery/index.vue'
import DalleSize from './_components/dalle/dalle-size.vue'
import DalleStyle from './_components/dalle/dalle-style.vue'
import DalleQuality from './_components/dalle/dalle-quality.vue'
import { formData, getDrawConfig, resetFormData } from './hooks/useDrawEffect'

onMounted(async () => {
    await resetFormData({
        engine: 'dalle',
        model: 'dall-e-3',
        action: 'generate',
        scale: '1:1',
        prompt_in: '',
        other_params: {
            quality: 'standard',
            style: 'vivid'
        }
    })
    await getDrawConfig()
})
</script>
